.spa-shell-head, .spa-shell-head-logo, .spa-shell-head-acct, .spa-shell-head-search,
.spa-shell-main, .spa-shell-main-nav, .spa-shell-main-content,
.spa-shell-foot, .spa-shell-chat,
.spa-shell-modal {
    position: absolute;
}
/*header*/
.spa-shell-head {
    top:0;
    left:0;
    right:0;
    height: 40px;
}
.spa-shell-head-logo {
    top:4px;
    left: 4px;
    height: 32px;
    width: 128px;
    background: orange;
}
.spa-shell-head-acct {
    top: 4px;
    right: 0;
    width: 64px;
    height: 32px;
    background: green;
}
.spa-shell-head-search {
    top: 4px;
    right: 64px;
    width: 248px;
    height: 32px;
    background: blue;
}

/*main*/
.spa-shell-main {
    top:40px;
    left:0;
    bottom: 40px;
    right:0;
}
.spa-shell-main-nav, .spa-shell-main-content {
    top: 0;
    bottom: 0;
}
.spa-shell-main-nav {
    width: 250px;
    background-color: #eeeeee;
}
.spa-x-closed .spa-shell-main-nav {
    width: 0;
}
.spa-shell-main-content {
    left: 250px;
    right: 0;
    background: #dddddd;
}
.spa-x-closed .spa-shell-main-content {
    left: 0;
}
.spa-shell-foot {
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
}
.spa-shell-chat {
    bottom: 0;
    right: 0;
    width: 300px;
    height: 15px;
    cursor: pointer;
    background: red;
    border-radius: 5px 0 0 0;
    z-index: 1;
}
.spa-shell-chat:hover {
    background: #aa0000;
}
.spa-shell-modal {
    margin-top: -200px;
    margin-left: -200px;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #ffffff;
    border-radius: 3px;
    z-index: 2;
}